<template>
  <div class="mymusic">
    <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
    <div class="content bg-f padding-24">
      <div class="top space-between" v-if="musiclist && Object.keys(musiclist).length">
        <div class="left center-col">
          <img :src="playall" alt />
          <p class="fs-36">全部播放</p>
        </div>
        <div class="right center-col">
          <img :src="operate" alt @click="toOperation" />
          <p>批量操作</p>
        </div>
      </div>
      <div class="tips" v-else>您还没有购买任何歌曲奥~</div>
      <div class="music-list">
        <div
          class="list-item space-between"
          v-for="(item,index) in musiclist"
          :key="index"
          @click="toSonDetail(item)"
        >
          <div class="left">
            <p class="fs-36 overFlow">{{item.music_name}}</p>
            <p class="fs-26 color-9 overFlow mes">
              <img v-show="item.royalty != 0 && item.royalty != '0.00'" :src="exclusive" alt />
              <img v-show="item.royalty != 0 && item.royalty != '0.00'" :src="payment" alt />
              {{item.singer_name}}-{{item.music_list_name}}
            </p>
          </div>
          <div class="right" @click.stop="toShowModel(item)">
            <img :src="more" alt />
          </div>
        </div>
      </div>
    </div>
    <songMore :showSongMore="showSongMore" :musicObject="musicObject" @fn="getSongMoreStatus"></songMore>
    <!-- <shareModel v-show="leaderModal" @fn="getShareModel" :leaderModal="leaderModal"></shareModel> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      store: this.getStore(),
      playall: require("../../assets/index/playAll.png"),
      operate: require("../../assets/index/operate.png"),
      more: require("../../assets/index/more.png"),
      exclusive: require("@/assets/index/exclusive.png"),
      payment: require("@/assets/index/payment.png"),
      isBack: true,
      title: "已购买歌曲",
      musiclist: [],
      playingList: [], //播放列表
      showSongMore: false, //展示歌曲更多模态框
      musicObject: {}, //音乐信息
      leaderModal: false //控制微信内分享模态框
    };
  },
  methods: {
    // 批量操作
    toOperation() {
      this.$router.push({
        path: "/index/batch-operation",
        query: { list: this.musiclist }
      });
    },
    // 展开歌曲更多模态框
    toShowModel(item) {
      this.musicObject = item;
      this.showSongMore = true;
    },
    // 获取分享模态框传过来的status
    getShareModel(e) {
      this.leaderModal = e;
    },
    //   获取我喜欢的音乐列表数据
    getMyMusicList() {
      const url = this.$host1 + `home/haveBuyMusicList`;
      var params = {};
      this.$axios
        .get(url)
        .then(res => {
          console.log(res.data, "---res.data--我的音乐列表");
          if (res.data.code == 200) {
            this.musiclist = res.data.data.list;
          } else if(res.data.code == 0){
            this.AlertWin(res.data.message);
            this.$router.push({path:'/login'});
          }
          else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取歌曲更多模态框的状态
    getSongMoreStatus(e) {
      this.showSongMore = e;
    },
    // 去歌曲播放页面
    toSonDetail(item) {
      this.store.setData(item.music_id, 7);
      this.getPayPlayingList(item.music_id, 7);
    },
    // 获取我喜欢的音乐的播放列表数据
    getPayPlayingList(music_id, music_from) {
      const url =
        this.$host1 +
        `home/musicMainMsg?music_id=` +
        music_id +
        `&music_from=` +
        music_from;
      this.$axios
        .get(url)
        .then(res => {
          if (res.data.code == 200) {
            this.playingList = res.data.data.list;
            this.store.playingList = this.playingList;
            //  console.log(JSON.stringify(this.playingList))
            window.localStorage.setItem(
              "playingList",
              JSON.stringify(this.playingList)
            );
            console.log(
              res.data.data,
              "---res.data.data--获取已购买的播放列表"
            );
            this.store.isPlay = true;
            this.store.isFullPlay = true;
            // console.log(JSON.parse(window.localStorage.getItem("playingList")),'----JSON.parse(window.localStorage.getItem("playingList"));');
            //  console.log(this.playingList,'----this.playingLis----albumdetail')
          } else if (res.data.code == 0) {
            this.AlertWin(res.data.data.message);
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    }
  },
  created() {
    this.getMyMusicList();
  }
};
</script>
<style lang="scss" scoped>
.mymusic {
  .content {
    margin-top: 1rem;
    width: 100%;
    height: auto;
    .top {
      height: 1rem;
      .left {
        img {
          width: 0.38rem;
          height: 0.38rem;
          margin-right: 0.2rem;
        }
      }
      .right {
        img {
          width: 0.3rem;
          height: 0.3rem;
          margin-right: 0.2rem;
        }
      }
    }
    .music-list {
      .list-item {
        width: 100%;
        height: 1.6rem;
        border-bottom: 0.01rem solid #e9e9e9;
        .left {
          width: 6rem;
          height: 100%;
          //background-color: greenyellow;
          .fs-36 {
            margin-top: 0.3rem;
          }
          .fs-26 {
            margin-top: 0.15rem;
          }
          .mes {
            display: flex;
            align-items: center;
            img {
              width: 0.5rem;
              height: 0.24rem;
              vertical-align: middle;
              display: inline-block;
              margin-right: 0.11rem;
            }
            .txt {
              font-weight: 500;
              color: rgba(153, 153, 153, 1);
              line-height: 0.36rem;
              white-space: wrap;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
        }
        .right {
          img {
            width: 0.08rem;
            height: 0.36rem;
          }
        }
      }
    }
  }
  .tips {
    text-align: center;
    line-height: 1rem;
  }
}
</style>